import axios from "axios";
import React, { useEffect, useState } from "react";
import "./Patient.css";
import { Tabs, Input, Space, DatePicker, Button,Pagination } from 'antd';
import type { TabsProps, } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
import "./Patient.css"
import type { PaginationProps } from 'antd';

interface Pros {
    opd: string;
    chunum: string;
    card: string;
    name: string;
    room: string;
    doctor: string;
    money: string;
    status: string;
    time: string;
}
const { RangePicker } = DatePicker;

const OPDS: React.FC = () => {
    // 门诊处方查询表
    const [user, setUser] = useState<Pros[]>([]);
    const [activeTab, setActiveTab] = useState<string>("1"); // 当前选中的 Tab
    const [dates, setDates] = useState([null, null]);
    const onChanges = (dates) => {
        setDates(dates);
    };
    const [size] = useState('large');
    // 处方号搜索
    const [chufang, setchufang] = useState("")
    // 患者名称搜索
    const [name, setname] = useState("")
    // 证件号搜索
    const [documents, setdocuments] = useState("")
    // 证件号搜索
    const [zheng, setzheng] = useState("")
    // 状态搜索
    const [status, setstatus] = useState("")
    // 开单医生搜索
    const [doctors, setdoctors] = useState("")
    // 开单科室搜索

    const [billing, setbilling] = useState("")
    // 分页
    const [pages, setpages] = useState(1)
    const [num, setnum] = useState(1)
    const [numpage, setnumpage] = useState(1)
    const limit = 5  //每页条数
    // 渲染数据
    const getList = (page: number) => {
        axios.get(`http://127.0.0.1:3000/cws/index_in/?page=${page}&limit=${limit}&chufang=${chufang}&name=${name}&document=${documents}&zheng=${zheng}&status=${status}&docuto=${doctors}&billing=${billing}`)
            .then((response) => {
                const { code, data, num, numpage } = response.data;
                if (code === 200) {
                    setUser(data);
                    setnum(num)
                    setnumpage(numpage)
                }
            })
            .catch((error) => {
                console.error("请求失败:", error);
            });
    };

    // 挂载
    useEffect(() => {
        getList(pages);
    }, [pages]);
    // 分页
    const hangpage = (page: number) => {
        setpages(page)
    }

    const filteredData = user.filter((item) => {
        if (activeTab === "1") {
            return true; // 全部缴费，显示所有数据
        } else if (activeTab === "2") {
            return item.status === "false"; // 已缴费
        } else if (activeTab === "3") {
            return item.status === "true"; // 已退费
        }
        return true;
    });

    // Tab 切换回调
    const onChange = (key: string) => {
        setActiveTab(key);
    };

    // Tab 配置
    const items: TabsProps['items'] = [
        {
            key: '1',
            label: '全部缴费',
        },
        {
            key: '2',
            label: '已缴费',
        },
        {
            key: '3',
            label: '已退费',
        },
    ];


    // 搜索
    const search = () => {
        getList(pages)
    }

    const hangpage1: PaginationProps['onChange'] = (pageNumber) => {
        console.log('Page: ', pageNumber);
    };
    return (
        <div>
            <div className="money1">
                <div className="money2">
                    <span>就诊卡号:</span>&nbsp;
                    <Input style={{ width: "250px" }} placeholder="请输入" onChange={(event) => {
                        setchufang(event.target.value)
                    }} />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <span>患者姓名:</span>&nbsp;
                    <Input style={{ width: "250px" }} placeholder="请输入" onChange={(event) => {
                        setname(event.target.value)
                    }} />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <span>证件号:</span>&nbsp;
                    <Input style={{ width: "250px" }} placeholder="请输入" onChange={(event) => {
                        setdocuments(event.target.value)
                    }} /><br></br>
                    <span>门(就)诊号:</span>&nbsp;
                    <Input style={{ width: "250px" }} placeholder="请输入" onChange={(event) => {
                        setzheng(event.target.value)
                    }} />
                    <span style={{ marginLeft: "65px" }}>缴费状态:</span>&nbsp;
                    <select name="" id="" onChange={(event) => {
                        setstatus(event.target.value)
                    }}>
                        <option value="">全部状态</option>
                        <option value="false">已缴费</option>
                        <option value="true">已退费</option>
                    </select>
                    <span style={{ marginLeft: "80px" }}>收费时间:</span>&nbsp;
                    <Space direction="vertical" size={12}>
                        <RangePicker
                            value={dates}
                            onChange={onChanges}
                            style={{ width: "250px" }}
                            format="YYYY-MM-DD HH:mm"
                            placeholder={['开始时间', '结束时间']}
                        />
                    </Space>
                    <br></br>
                    <span>开单医生:</span>&nbsp;
                    <Input style={{ width: "250px" }} placeholder="请输入" onChange={(event) => {
                        setdoctors(event.target.value)
                    }} />
                    <span style={{ marginLeft: "75px" }}>开单科室:</span>&nbsp;
                    <Input style={{ width: "250px" }} placeholder="请输入" onChange={(event) => {
                        setbilling(event.target.value)
                    }} />
                    <div style={{ marginLeft: "900px", marginTop: "-50px" }} className="cui">
                        <Button type="primary" icon={<DownloadOutlined />} size={size} />
                        <Button type="primary">重置</Button>
                        <Button type="primary" onClick={() => {
                            search()
                        }}>搜索</Button>
                    </div>
                </div>

            </div>
            <Tabs
                defaultActiveKey="1"
                items={items}
                onChange={onChange}
                style={{ marginLeft: "450px" }}
            />
            <div className="money">

                <table>
                    <thead>
                        <tr style={{ backgroundColor: "rgb(242, 242, 242)", height: "55px" }}>
                            <td>门(就)卡号</td>
                            <td>处方号</td>
                            <td>就诊卡号</td>
                            <td>患者姓名</td>
                            <td>开单科室</td>
                            <td>开单医生</td>
                            <td>缴费状态</td>
                            <td>缴费金额</td>
                            <td>收费时间</td>
                            <td>操作</td>
                        </tr>
                    </thead>
                    <tbody>
                        {filteredData.map((item, index) => (
                            <tr key={index} style={{ backgroundColor: "white" }}>
                                <td>{item.opd}</td>
                                <td>{item.card}</td>
                                <td>{item.chunum}</td>
                                <td>{item.name}</td>
                                <td>{item.room}</td>
                                <td>{item.doctor}</td>
                                <td>{item.money}</td>
                                <td>{item.status === "false" ? "已缴费" : "已退费"}</td>
                                <td>{item.time}</td>
                                <td>
                                    <span style={{ color: "blue" }}>详情</span>&nbsp;&nbsp;&nbsp;
                                    <span style={{ color: "blue" }}>处方退费</span>&nbsp;&nbsp;&nbsp;
                                    <span style={{ color: "blue" }}>更多</span>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
            <div className="page">
                <div style={{
                    width: "500px", marginLeft: "900px", height: "100px"
                }}>
                    <span style={{ float: "left", lineHeight: "30px", "color": "blue" }}>共有{num}数据</span>
                    <Pagination showQuickJumper defaultCurrent={numpage} total={num} pageSize={limit} onChange={hangpage} />
                </div>
            </div>
        </div>
    );
};

export default OPDS;